<template>
  <div class="userCenter">
    <header>
      <pageHead  :list="userBoxList" />
      <div class="pageTitle">
        <div class="container">
          <h3>用户中心</h3>
        </div>
      </div>
    </header>
    <main :style="mainHeight">
      <div class="container">
        <div class="contentTitle">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item
              v-for="(item,index) in data"
              :key="index"
              :name="item.name">
              <template slot="title">
                <p class="title">{{item.title}}</p>
              </template>
              <div
                v-for="(i,index) in item.childData"
                :key="index"
                @click="openChildData(i)"
                class="childTitle row">
                <span
                  :class="preName===i.name?'checked':''"
                  :id="i.name">
                  {{i.title}}
                </span>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="content">
          <div v-show="preName==='basics'" class="contentBox"> <basics :userInfo="userInfo" :num="num" /> </div>
          <div v-show="preName==='safety'" class="contentBox"> <safety :userInfo="userInfo" /> </div>
          <div v-show="preName==='service'" class="contentBox"> <service :userInfo="userInfo" /> </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import pageHead from '../common/pageHead/pageHead.vue'  // 页头
  import basics from './childData/basics.vue'
  import safety from './childData/safety.vue'
  import service from './childData/service.vue'
    export default {
        name: "userCenter",
        data() {
            return {
                userInfo: {},  // 用户信息
                num: 1,
                // 页面高度
                pageHeight: '',
                mainHeight: { height: '' },
                userBoxList: [
                    {name: '我的账户', url: '', type: 'account'},
                    {name: '我的消息', url: '', type: 'news'},
                    {name: '我的订单', url: '', type: 'order'},
                    {name: '退出', url: '', type: 'exit'},
                ],
                activeNames: ['userCenter'],
                preName: 'basics',
                data: [
                    {
                        title: '个人中心',
                        name: 'userCenter',
                        childData: [
                            { title: '基本资料', name: 'basics' },
                            { title: '账号保护', name: 'safety' },
                        ]
                    },
                    {
                        title: '用户管理',
                        name: 'userManagement',
                        childData: [
                            { title: '在线客服', name: 'service' },
                        ]
                    }
                ],
            }
        },
        components: {
            pageHead,
            basics,
            safety,
            service
        },
        created() {
            this.getUserInfo();  // 获取用户信息
        },
        mounted() {
            this.getPageHeight();
            window.onresize = () => {
                this.getPageHeight();
            };
        },
        methods: {
            // 请求用户信息
            async getUserInfo() {
              // 操作，  操作，  操作，  操作，  操作，  操作，  操作，  操作，  操作，
                this.userInfo = {
                    headImg: 'https://www.ewt360.com/Content/images/photos/p1.jpg',
                    name: '李恩童',
                    type: 'vip',
                    province: '山东省',
                    ID: '用户名',
                    phone: '136***3361',
                    nickName: '昵称',
                    qq: '136542641',
                    weiChat: 'msg12364',
                    pwd: '********'
                }
            },
            // 获取页面高度
            getPageHeight() {
                this.pageHeight = document.documentElement.clientHeight;  // 页面高度
                let headerHeight = document.getElementsByTagName('header')[0].offsetHeight;  // header高度
                this.mainHeight.height = this.pageHeight - headerHeight + 'px';  // main高度
            },
            handleChange(val) {
                console.log(val);
            },
            openChildData(item) {
                console.log(item);
                this.preName = item.name;
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../styles/common.scss';
  // header
  header{
    .pageTitle{
      background-color: #2e86ff;
      height: 120px;
      h3{
        font-size: 1.8rem;
        font-weight: normal;
        line-height: 120px;
        color: #fff;
        padding-left: 20px;
      }
    }
  }
  // main
  main{
    background-color: #f2f2f2;
    .container{
      display: flex;
      height: 100%;
      background-color: #fff;
      .contentTitle{
        width: 30%;
        border-right: 1px solid #f2f2f2;
        .el-collapse{
          .el-collapse-item{
            .title{
              margin-left: 20px;
            }
            .childTitle{
              border-bottom: 1px solid #f2f2f2;
              padding: 12px 20px;
              background-color: #f9f9f9;
              cursor: pointer;
              span.checked{
                color: #2e86ff;
              }
            }
          }
          .is-active{
            color: red;
          }
        }
      }
      .content{
        width: 70%;
      }
    }
  }
</style>